<template>
	<view>

		<image class="page-bg" src="https://lclook.oss-cn-shenzhen.aliyuncs.com/camping/userBg.png"></image>

		<indexHeader></indexHeader>

		<view class="wrapper">
			<view class="user-box" @click="_updateUserInfo">
				<view class="user-box_bd">
					<view>HI.</view>
					<view class="user-box_nickname">
						<text>{{userInfo.nickName||"点击授权微信信息"}}.</text>
						<image class="user-box_vip-icon" src="/static/img/championicon.png" mode="aspectFit"
							v-if="userInfo.member"></image>
					</view>
				</view>
				<image class="user-box_avatar" :src="userInfo.avatar||defaultAvatar" mode="aspectFill"></image>
			</view>
		</view>

		<view class="wrapper">

			<view class="vip-box" style="margin-bottom: 32rpx;" @click="handleJoinVip"
				v-if="userInfo.member&&userInfo.isMemberExpired">
				<image class="vip-box_bg" mode="scaleToFill" src="/static/img/memberBg.png"></image>
				<view class="vip-box_bd">
					<view class="vip-box_title">
						<image class="vip-box_icon" src="/static/img/championicon.png" mode="aspectFill"></image>
						<text>您的会员即将到期</text>
					</view>
					<view class="vip-box_desc">到期时间:{{ userInfo.expireTime }}</view>
				</view>
				<view class="vip-box_btn">立即续费</view>
			</view>

			<view class="vip-box" v-if="!userInfo.member" @click="handleJoinVip">
				<image class="vip-box_bg" mode="scaleToFill" src="/static/img/memberBg.png"></image>
				<view class="vip-box_bd">
					<view class="vip-box_title">
						<image class="vip-box_icon" src="/static/img/championicon.png" mode="aspectFill"></image>
						<text>开通U会员</text>
					</view>
					<view class="vip-box_desc">多次免费参加各种活动与营地活动</view>
				</view>
				<view class="vip-box_btn">立即成为会员</view>
			</view>

			<view class="vip-right-box" v-else>
				<view class="vip-right-item" @click="toPage(`pages/benefits/index?type=activity`)">
					<view class="vip-right-item_title">活动次数</view>
					<view class="vip-right-item_ft">
						<view class="vip-right-item_value">
							<text>{{ userInfo.activityNum }}</text>
							<text style="font-size: 26rpx; font-weight: normal; margin-left: 8rpx;">次</text>
						</view>
						<u-icon name="arrow-right" color="rgba(255,255,255,.4)" size="24"></u-icon>
					</view>
				</view>
				<view class="vip-right-item" @click="toPage(`pages/benefits/index?type=camp`)">
					<view class="vip-right-item_title">营地次数</view>
					<view class="vip-right-item_ft">
						<view class="vip-right-item_value">
							<text>{{ userInfo.campNum }}</text>
							<text style="font-size: 26rpx; font-weight: normal; margin-left: 8rpx;">次</text>
						</view>
						<u-icon name="arrow-right" color="rgba(255,255,255,.4)" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="wrapper">
			<view class="wrapper-title">我的功能</view>
			<view class="func-box">
				<view class="func-item" v-for="(item, index) in funcList" :key="index" @click="handleFuncClick(item)">
					<button class="func-item_btn" :open-type="item.openType" v-if="item.type=='button'"></button>
					<image class="func-item_icon" :src="item.iconPath" mode="scaleToFill"></image>
					<text class="func-item_name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<view class="wrapper">
			<view class="wrapper-title">我参与的活动</view>
			<view class="order-box">
				<block v-if="orderList.length>0">
					<view class="order-item" v-for="(item, index) in orderList" :key="index"
						@click="toPage(`pages/order/detail?orderNo=${item.order.orderNo}`)">
						<image class="order-item_img" :src="item.coverImg" mode="aspectFill"></image>
						<view class="order-item_title">{{ item.activityName }}</view>
					</view>
				</block>
				<view class="order-box_blank" v-else>暂无参与的活动,请多多参与～</view>
			</view>
		</view>

		<view class="wrapper">
			<view class="wrapper-title">会员权益</view>
			<view class="right-box">
				<view class="right-item" v-for="(item, index) in rightList" :key="index"
					@click="handlePreview(item.coverImg)">
					<view class="right-item_title">
						<text>{{ item.title }}</text>
						<text class="right-item_title-en">{{ item.titleEn }}</text>
					</view>
					<view class="right-item_bd">
						<image class="right-item_img" :src="item.coverImg" mode="aspectFill"></image>
						<view class="right-item_desc">{{ item.describe }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer-wrapper">- 伴你一起探索新世界 -</view>

		<view class="admin-wrapper" v-if="userInfo.isAdmin||userInfo.isAdminCamp">
			<view class="admin-box">
				<button class="btn" v-if="userInfo.isAdmin" @click="toPage(`pages/admin/index`)">管理入口</button>
				<button class="btn" v-else-if="userInfo.isAdminCamp"
					@click="toPage(`pages/admin/camp/index`)">营地管理入口</button>
			</view>
		</view>

	</view>
</template>

<script>
	import indexHeader from './components/indexHeader';

	import {
		getOrderList,
		createOrder,
		payOrder,
		queryOrder
	} from '@/api/order.js'
	import {
		getRightList
	} from '@/api/public.js'
	import {
		wxPayment,
	} from '@/utils/util.js'

	import {
		mapGetters
	} from "vuex";

	// 我的功能入口配置
	const funcList = [{
			name: '报名活动',
			iconPath: '/static/img/calendarIcon.png',
			type: 'link',
			url: 'pages/order/list',
		},
		{
			name: '城市足迹',
			iconPath: '/static/img/flagIcon.png',
			type: 'link',
			url: 'pages/map/index',
		},
		{
			name: '我的收藏',
			iconPath: '/static/img/userStart.png',
			type: 'link',
			url: 'pages/collect/index',
		},
		{
			name: '联系客服',
			iconPath: '/static/img/headsetIcon.png',
			type: 'button',
			openType: 'contact'
		},
		{
			name: '关于UL',
			iconPath: '/static/img/logoIcon.png',
			type: 'link',
			url: 'pages/about/index',
		}
	]
	// 获取多少条订单记录
	const pageSize = 10

	export default {
		components: {
			indexHeader
		},
		computed: {
			...mapGetters({
				userInfo: 'userInfo',
			})
		},
		data() {
			return {
				// 页面传参
				options: {},
				// 默认头像
				defaultAvatar: '/static/img/logoIndex.png',
				// 我的功能入口
				funcList: funcList,
				// 我参与的活动
				orderList: [],
				// 会员权益
				rightList: [],
			}
		},
		onLoad(options) {
			this.options = options
		},
		onShow() {
			this._getUserInfo()
			this._getOrderList()
			this._getRightList()
		},
		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			return {
				path: `/pages/index/index`,
				imageUrl: `/static/img/sharePost.jpg`,
			}
		},
		methods: {
			// 获取用户信息
			_getUserInfo() {
				let that = this
				that.$store.dispatch('getUserInfo')
			},

			// 更新用户信息
			_updateUserInfo() {
				let that = this
				uni.showLoading()
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '完善用户信息',
					success: (res) => {
						let {
							avatarUrl,
							nickName
						} = res.userInfo
						that.$store.dispatch('updateUserInfo', {
							"avatar": avatarUrl,
							"nickName": nickName
						}).then(res => {
							that.$util.showSuccess("更新成功")
							setTimeout(() => {
								uni.hideLoading()
							}, 800)
						})
					},
					fail: () => {
						uni.hideLoading()
					}
				})
			},

			// 获取订单列表
			_getOrderList() {
				let that = this
				getOrderList({
					"pageSize": pageSize,
					"pageNum": 1,
				}).then(res => {
					that.orderList = res.rows
				})
			},

			// 获取权益列表
			_getRightList() {
				let that = this
				getRightList().then(res => {
					that.rightList = res.rows
				})
			},

			// 成为会员
			handleJoinVip() {
				let that = this
				uni.showLoading()
				createOrder({
					"buyType": 30
				}).then(res => {
					return payOrder({
						orderNo: res.data.orderNo
					})
				}).then(res => {
					let {
						needPay,
						result,
						orderNo
					} = res.data
					if (needPay) {
						// 发起微信支付
						wxPayment(result)
							.finally(res => {
								queryOrder({
									orderNo: orderNo
								}).then(res => {
									uni.hideLoading()
									if (res.data.isPay) {
										uni.showModal({
											title: '支付成功',
											content: '恭喜您已开通UL会员，相关会员权益已发放到当前账号，快去体验吧！',
											showCancel: false,
											confirmText: '我知道了',
											complete: () => {
												that._getUserInfo()
											}
										});
									} else {
										that.$util.showError('开通会员失败')
									}
								})
							})
					}
				})
			},

			// 点击我的功能
			handleFuncClick(data) {
				if (data.type == 'link') {
					this.$util.navTo(data.url)
				}
			},

			// 会员权益图片预览
			handlePreview(img) {
				uni.previewImage({
					urls: [img]
				})
			},

			// 页面跳转
			toPage(url) {
				this.$util.navTo(url)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		z-index: -1;
	}

	.wrapper {
		padding: 32rpx;

		&-title {
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, .6);
			margin-bottom: 32rpx;
		}
	}

	.user-box {
		display: flex;
		align-items: center;

		&_bd {
			flex: 1;
			font-size: 52rpx;
			font-weight: bold;
			line-height: 72rpx;
			color: #fff;
		}

		&_nickname {
			display: flex;
			align-items: center;
		}

		&_vip-icon {
			display: block;
			width: 48rpx;
			height: 48rpx;
			margin-left: 16rpx;
		}

		&_avatar {
			display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, .2);
		}
	}

	.vip-box {
		display: flex;
		align-items: center;
		padding: 32rpx;
		position: relative;

		&_bg {
			position: absolute;
			z-index: -1;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		&_bd {
			flex: 1;
		}

		&_title {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			color: #fff;
		}

		&_icon {
			display: block;
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		&_desc {
			color: rgba(255, 255, 255, .6);
			font-size: 24rpx;
			margin-top: 16rpx;
		}

		&_btn {
			font-size: 24rpx;
			line-height: 64rpx;
			color: #393939;
			padding: 0 24rpx;
			border-radius: 32rpx;
			background-image: linear-gradient(65deg, #D3B163, #F7E9B8);
		}
	}

	.vip-right-box {
		display: flex;

		.vip-right-item {
			flex: 1;
			box-sizing: border-box;
			padding: 24rpx;
			border-radius: 16rpx;
			background-image: url('https://lclook.oss-cn-shenzhen.aliyuncs.com/camping/userGrain.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			color: #fff;
			position: relative;

			&+.vip-right-item {
				margin-left: 32rpx;
			}

			&_title {
				font-size: 32rpx;
				font-weight: bold;
			}

			&_ft {
				display: flex;
				align-items: center;
				margin-top: 32rpx;
			}

			&_value {
				flex: 1;
				font-size: 48rpx;
				font-weight: bold;
			}

		}
	}

	.func-box {
		display: flex;
		margin-top: 32rpx;

		.func-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			&_icon {
				display: block;
				width: 64rpx;
				height: 64rpx;
			}

			&_name {
				font-size: 24rpx;
				color: rgba(255, 255, 255, .6);
				margin-top: 8rpx;
			}

			&_btn {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 10;
			}
		}
	}

	.order-box {
		margin: 0 -32rpx;
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 32rpx;
		position: relative;

		&::after {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: 32rpx;
			right: 0;
			border-top: 1rpx solid rgba(255, 255, 255, .2);
		}

		&_blank {
			flex: 1;
			font-size: 24rpx;
			text-align: center;
			color: rgba(255, 255, 255, .4);
		}

		.order-item {
			min-width: 280rpx;
			height: 210rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 24rpx;

			&_img {
				display: block;
				width: 100%;
				height: 100%;
			}

			&_title {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
				line-height: 48rpx;
				text-align: center;
				background-color: rgba(0, 0, 0, .6);
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 16rpx;
				box-sizing: border-box;
				margin-top: -48rpx;
			}

			&:first-child {
				margin-left: 32rpx;
			}

			&:last-child {
				margin-right: 32rpx;
			}
		}
	}

	.right-box {
		.right-item {
			&+.right-item {
				margin-top: 32rpx;
			}

			&_title {
				font-size: 24rpx;
				color: rgba(255, 255, 255, .6);
				margin-bottom: 24rpx;

				&-en {
					color: rgba(255, 255, 255, .4);
					margin-left: 8rpx;
				}
			}

			&_bd {
				height: 240rpx;
				border-radius: 24rpx;
				overflow: hidden;
			}

			&_img {
				display: block;
				width: 100%;
				height: 100%;
			}

			&_desc {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
				line-height: 48rpx;
				text-align: center;
				background-color: rgba(0, 0, 0, .6);
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 16rpx;
				box-sizing: border-box;
				margin-top: -48rpx;
			}
		}
	}

	.footer-wrapper {
		font-size: 24rpx;
		color: rgba(255, 255, 255, .4);
		padding: 64rpx 32rpx;
		text-align: center;
	}

	.admin-wrapper {
		height: 160rpx;

		.admin-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160rpx;
			box-sizing: border-box;
			padding: 32rpx;
		}
	}
</style>
